import React, { Component } from "react";
import MainLayout from "@component/mainLayout/mainLayout";
import { Toast } from "antd-mobile";
import { Base64 } from "js-base64";
import { connect } from "react-redux";

import yhTools from "@tools/yh";
import XHQBConfig from "@config/XHQBConfig";

import "./index.scss";

import iconZfb from "@images/icon_zfb.png";
import iconGou from "@images/icon_gou.png";

/**
 * 小辉钱包充值
 */
class XhqbRecharge extends Component {
	constructor(props) {
		super(props);
		this.state = {
			flag: true,
			payType: 2, // 支付方式，1微信 2支付宝
			quotaList: [], // 额度列表
			defQuota: 0, // 当前选择的额度index
			availAmount: "0", // 余额
			quotaId: "", //充值金额
			getpwd: "", //判断是否需要设置密码
			fromType: ""
		};
	}
	componentDidMount() {
		let _that = this;
		if (this.props.location.query) {
			this.setState({
				flag: false
			});
		}
		let objs = {
			url: XHQBConfig.queryMemberInfo,
			params: {}
		};
		yhTools.request(objs).then(res => {
			let { member } = res.data;
			if (res.code === "0") {
				this.getQuotaInfo();
				_that.setState({
					getpwd: member.needSetPassword //是否需要设置支付密码
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	getQuotaInfo() {
		Toast.loading("加载中...", 5);
		let objs = {
			url: XHQBConfig.queryRechargeQuotaList,
			params: {},
			_alertShow: false
		};
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				Toast.hide();
				const { availAmount = "", quotas = [] } = res.data;
				if (quotas.length === 0) return;
				this.setState({
					availAmount: availAmount,
					quotaList: quotas,
					quotaId: quotas[0].quotaId
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	/**支付方式切换点击 */
	payTypeChangeClick(payType) {
		this.setState({
			payType
		});
	}
	/* 点击充值金额 */
	quotaIdClick(quotaId) {
		this.setState({
			quotaId
		});
	}
	/* 跳转充值说明 */
	Rechargeinstruction() {
		this.props.history.push("/rechargeinstruction");
	}
	/* 跳转明细 */
	gotodetail() {
		this.props.history.push("/walletbill");
	}
	/**确认充值 */
	confirmRechargeClick() {
		let { quotaId, payType, getpwd } = this.state;
		if (payType === 1) {
			Toast.info("敬请期待!", 2);
			return;
		}
		let ip = "";
		if (this.props.getAppPlatformsDatas.devicesInfo.cellIp) {
			ip = this.props.getAppPlatformsDatas.devicesInfo.cellIp;
		} else if (this.props.getAppPlatformsDatas.devicesInfo.wifiIp) {
			ip = this.props.getAppPlatformsDatas.devicesInfo.wifiIp;
		}
		/* 判断是否需要设置密码 */
		if (getpwd == "0") {
			/* 不需要去支付 */
			let objs = {
				url: XHQBConfig.confirmRecharge,
				params: {
					appRequest:
						yhTools.platform === "android"
							? 1
							: yhTools.platform === "ios"
							? 2
							: 3,
					quotaId, // 额度id
					payType, // 1微信，2支付宝
					clientIp: ip // 用户ip
				},
				_alertShow: false
			};
			Toast.loading("Loading...", 100, () => {});
			yhTools.request(objs).then(res => {
				if (res.code === "0") {
					if (res.data.status === "2") {
						const {
							request_data,
							channel_no,
							channel_name,
							request_url
						} = res.data.respData;
						let decRequest_data = Base64.decode(request_data);
						yhTools
							.openAlipayView({
								request_data: decRequest_data,
								channel_no,
								channel_name,
								request_url
							})
							.then(resp => {
								if (resp.status === "1000") {
									Toast.info("充值成功", 2);
									this.getQuotaInfo();
								} else {
									Toast.info("充值失败", 2);
								}
							});
					} else {
						Toast.info(res.data.msg, 2);
					}
				} else {
					Toast.info(res.message, 2);
				}
			});
		} else if (getpwd == "1") {
			/* 密码设置页面 */
			this.props.history.replace({
				pathname: "/settransactionpassword",
				query: { name: "recharge" }
			});
		}
	}
	render() {
		// header配置
		const _pageParams = {
			header: {
				title: "余额",
				goBackAction: () => {
					if (sessionStorage.getItem("index_fromType") === "app") {
						yhTools.closePage({ flag: "pageBalance" });
					} else {
						this.props.history.goBack();
					}
				}
			},
			history: this.props.history
		};

		const { payType, quotaList, availAmount, quotaId } = this.state;

		return (
			<MainLayout pageParams={_pageParams}>
				<div className="xhqb_recharge-box">
					{/* 头部 */}
					<div className="recharge-header-box flexCenter">
						<div className="detail" onClick={this.gotodetail.bind(this)}>
							明细
						</div>
						<div className="unit">
							¥
							<span className="money">
								{availAmount
									? parseFloat(availAmount / 100).toFixed(2)
									: "0.00"}
							</span>
						</div>
						<div className="tip">仅线上支付使用</div>
					</div>
					{/* 金额选择区域 */}
					<div className="money-card-box">
						<div className="title-box">
							<div>账户充值</div>
							<div
								className="recharge_tip"
								onClick={this.Rechargeinstruction.bind(this)}
							>
								充值说明
							</div>
						</div>
						{quotaList.map((item, index) => {
							return (
								<div
									key={index}
									id="quota"
									className={
										item.quotaId === quotaId
											? "active money-card-item flexCenter"
											: "money-card-item flexCenter"
									}
									onClick={this.quotaIdClick.bind(this, item.quotaId)}
								>
									{item.quotaMemo}
									<span className="unit"></span>
								</div>
							);
						})}
					</div>
					{/* <div
            style={{ marginTop: ".3rem" }}
            className="pay-way"
            onClick={this.payTypeChangeClick.bind(this, 1)}
          >
            <img className="icon_logo" src={iconWx} alt="" />
            <span className="name">微信支付</span>
            {payType === 1 ? (
              <img className="icon_gou" src={iconGou} alt="" />
            ) : (
              ""
            )}
          </div> */}
					<div
						className="pay-way"
						onClick={this.payTypeChangeClick.bind(this, 2)}
					>
						<img className="icon_logo" src={iconZfb} alt="" />
						<span className="name">支付宝</span>
						{payType === 1 ? (
							""
						) : (
							<img className="icon_gou" src={iconGou} alt="" />
						)}
					</div>
					<div
						onClick={this.confirmRechargeClick.bind(this)}
						className="submit-btn flexCenter"
					>
						立即充值
					</div>
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const XhqbRechargePage = connect(
	mapStateToProps,
	mapDispatchToProps
)(XhqbRecharge);
export default XhqbRechargePage;
